<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/icon.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/icon.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"example.com","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"right","width":300,"display":"hide","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":false,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":"disqus","storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="vue指令太多了,抽空整理了一下,有补充的可以联系我。">
<meta property="og:type" content="article">
<meta property="og:title" content="vue常用指令">
<meta property="og:url" content="http://example.com/2021/12/08/vue%E6%8C%87%E4%BB%A4/index.html">
<meta property="og:site_name" content="爱笑爱工作-_-">
<meta property="og:description" content="vue指令太多了,抽空整理了一下,有补充的可以联系我。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/2021/12/08/vue%E6%8C%87%E4%BB%A4/Users/s/AppData/Roaming/Typora/typora-user-images/image-20211023142311753.png">
<meta property="og:image" content="http://example.com/2021/12/08/vue%E6%8C%87%E4%BB%A4/Users/s/AppData/Roaming/Typora/typora-user-images/image-20211023142412315.png">
<meta property="og:image" content="http://example.com/2021/12/08/vue%E6%8C%87%E4%BB%A4/Users/s/AppData/Roaming/Typora/typora-user-images/image-20211023154809645.png">
<meta property="og:image" content="http://example.com/2021/12/08/vue%E6%8C%87%E4%BB%A4/Users/s/AppData/Roaming/Typora/typora-user-images/image-20211026185300059.png">
<meta property="og:image" content="http://example.com/2021/12/08/vue%E6%8C%87%E4%BB%A4/Users/s/AppData/Roaming/Typora/typora-user-images/image-20211026185425383.png">
<meta property="article:published_time" content="2021-12-08T11:38:45.000Z">
<meta property="article:modified_time" content="2021-12-08T11:42:24.431Z">
<meta property="article:author" content="爱笑">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/2021/12/08/vue%E6%8C%87%E4%BB%A4/Users/s/AppData/Roaming/Typora/typora-user-images/image-20211023142311753.png">

<link rel="canonical" href="http://example.com/2021/12/08/vue%E6%8C%87%E4%BB%A4/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>vue常用指令 | 爱笑爱工作-_-</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>
<a target="_blank" rel="noopener" href="https://github.com/aixiao0322" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>


    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">爱笑爱工作-_-</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-首页">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-目录">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>目录</a>

  </li>
        <li class="menu-item menu-item-分类">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-标签">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-关于">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/12/08/vue%E6%8C%87%E4%BB%A4/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/title.jpg">
      <meta itemprop="name" content="爱笑">
      <meta itemprop="description" content="热衷于前端，热衷于王者，王者峡谷乱杀 -_-">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="爱笑爱工作-_-">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          vue常用指令
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2021-12-08 19:38:45 / 修改时间：19:42:24" itemprop="dateCreated datePublished" datetime="2021-12-08T19:38:45+08:00">2021-12-08</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/vue/" itemprop="url" rel="index"><span itemprop="name">vue</span></a>
                </span>
            </span>

          
            <span id="/2021/12/08/vue%E6%8C%87%E4%BB%A4/" class="post-meta-item leancloud_visitors" data-flag-title="vue常用指令" title="阅读次数">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span class="leancloud-visitors-count"></span>
              <span>℃</span>
            </span>
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2021/12/08/vue%E6%8C%87%E4%BB%A4/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2021/12/08/vue%E6%8C%87%E4%BB%A4/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>vue指令太多了,抽空整理了一下,有补充的可以联系我。</p>
<span id="more"></span>

<h2 id="vue指令-v-bind"><a href="#vue指令-v-bind" class="headerlink" title="vue指令-v-bind"></a>vue指令-v-bind</h2><p>目标: 给标签属性设置vue变量的值</p>
<ul>
<li>语法：<code>v-bind:属性名=&quot;vue变量&quot;</code>，这里的vue变量，指的是data中定义的数据变量</li>
<li>简写：<code>:属性名=&quot;vue变量&quot;</code></li>
<li>代码:</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 2. 值 -&gt; 标签原生属性上 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 语法: v-bind:原生属性名=&quot;vue变量&quot; --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">&quot;url&quot;</span>&gt;</span>点击去百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 语法: :原生属性名=&quot;vue变量&quot; --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">:src</span>=<span class="string">&quot;imgUrl&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">:src</span>=<span class="string">&quot;localImg&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> imgObj <span class="keyword">from</span> <span class="string">&quot;./assets/1.gif&quot;</span>; <span class="comment">// 唯独js需要导入图片文件(css/标签里可以直接使用图片地址)</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  <span class="comment">// 1. 准备变量</span></span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">url</span>: <span class="string">&quot;http://www.baidu.com&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//PS：网络地址可以直接使用，但是本地的图片，就需要导入来使用</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">imgUrl</span>:</span></span><br><span class="line"><span class="javascript">        <span class="string">&quot;http://yun.itheima.com/Upload/./Images/20210412/60741c11ab77b.jpg&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">localImg</span>: imgObj</span></span><br><span class="line"><span class="javascript">    &#125;;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript">&#125;;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="vue指令-v-on事件对象"><a href="#vue指令-v-on事件对象" class="headerlink" title="vue指令-v-on事件对象"></a>vue指令-v-on事件对象</h2><p>代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- vue指令:   v-on事件绑定--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>你要买商品的数量: &#123;&#123;count&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;count = count + 1&quot;</span>&gt;</span>增加1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;addFn&quot;</span>&gt;</span>增加1个<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;addCountFn(5)&quot;</span>&gt;</span>一次加5件<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">//简写@事件名</span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;subFn&quot;</span>&gt;</span>减少<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// ...其他省略</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="function"><span class="title">addFn</span>(<span class="params"></span>)</span>&#123; <span class="comment">// this代表export default后&#123;&#125;对象, data和methods里的属性都直接挂在它身上</span></span></span><br><span class="line"><span class="javascript">                <span class="built_in">this</span>.count++</span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="function"><span class="title">addCountFn</span>(<span class="params">num</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">this</span>.count += num</span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="function"><span class="title">subFn</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">this</span>.count--</span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="事件修饰符："><a href="#事件修饰符：" class="headerlink" title="事件修饰符："></a>事件修饰符：</h2><p>语法 : @事件名.修饰符=”methods里函数”（<strong>事件后面加</strong>   :）</p>
<ul>
<li>.stop - 阻止事件冒泡</li>
<li>.prevent - 阻止默认行为</li>
<li>.once - 程序运行期间, 只触发一次事件处理函数。</li>
</ul>
<h2 id="vue指令-v-model"><a href="#vue指令-v-model" class="headerlink" title="vue指令 v-model"></a>vue指令 v-model</h2><p>目标: 把value属性和vue数据变量, 双向绑定到一起</p>
<ul>
<li>v-model : 是实现vue变量和表单标签value属性, 双向绑定的指令</li>
<li>双向数据绑定</li>
<li><ul>
<li>数据变化 -&gt; 视图自动同步</li>
<li>视图变化 -&gt; 数据自动同步</li>
</ul>
</li>
<li>语法: v-model=”vue数据变量</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span>&gt;</span>用户名:<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- 1. v-model</span></span><br><span class="line"><span class="comment">         双向数据绑定</span></span><br><span class="line"><span class="comment">         value属性 - vue变量</span></span><br><span class="line"><span class="comment">       --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;username&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span>&gt;</span>密码: <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;pass&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">username</span>: <span class="string">&quot;&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">pass</span>: <span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript">&#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>目标：value属性和Vue数据变量, 双向绑定到一起 </p>
<h2 id="vue指令-v-model绑定不同表单标签"><a href="#vue指令-v-model绑定不同表单标签" class="headerlink" title="vue指令 v-model绑定不同表单标签"></a>vue指令 v-model绑定不同表单标签</h2><ul>
<li>语法: v-model=”Vue数据变量” </li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span>&gt;</span>来自于: <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- 下拉菜单要绑定在select上 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">select</span> <span class="attr">v-model</span>=<span class="string">&quot;from&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;北京市&quot;</span>&gt;</span>北京<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;南京市&quot;</span>&gt;</span>南京<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;天津市&quot;</span>&gt;</span>天津<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- (重要)</span></span><br><span class="line"><span class="comment">      遇到复选框, v-model的变量值</span></span><br><span class="line"><span class="comment">      非数组 - 关联的是复选框的checked属性（只要选中一个复选框，就会把checked的值true给此变量）</span></span><br><span class="line"><span class="comment">      数组   - 关联的是复选框的value属性</span></span><br><span class="line"><span class="comment">       --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span>&gt;</span>爱好: <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;hobby&quot;</span> <span class="attr">value</span>=<span class="string">&quot;抽烟&quot;</span>&gt;</span>抽烟</span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;hobby&quot;</span> <span class="attr">value</span>=<span class="string">&quot;喝酒&quot;</span>&gt;</span>喝酒</span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;hobby&quot;</span> <span class="attr">value</span>=<span class="string">&quot;写代码&quot;</span>&gt;</span>写代码</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span>&gt;</span>性别: <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">value</span>=<span class="string">&quot;男&quot;</span> <span class="attr">name</span>=<span class="string">&quot;sex&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;gender&quot;</span>&gt;</span>男</span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">value</span>=<span class="string">&quot;女&quot;</span> <span class="attr">name</span>=<span class="string">&quot;sex&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;gender&quot;</span>&gt;</span>女</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span>&gt;</span>自我介绍<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">textarea</span> <span class="attr">v-model</span>=<span class="string">&quot;intro&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">from</span>: <span class="string">&quot;&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="comment">//hobby:&quot;&quot;, //默认是空字符串，但是只要勾选一个复选框，此值即为true</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">hobby</span>: [],</span></span><br><span class="line"><span class="javascript">      <span class="attr">gender</span>: <span class="string">&quot;男&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">intro</span>: <span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript">&#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="v-model修饰符"><a href="#v-model修饰符" class="headerlink" title="v-model修饰符"></a>v-model修饰符</h2><ul>
<li><p>语法 : v-model.修饰符=”vue数据变量”</p>
</li>
<li><p>number   以parseFloat转成数字类型</p>
</li>
<li><p>.trim          去除首尾空白字符</p>
</li>
<li><p>.lazy           在change时触发而非inupt时</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- .number修饰符-把值<span class="built_in">parseFloat</span>转数值再赋予给v-model对应的变量 --&gt;</span><br><span class="line">&lt;!-- .trim修饰 - 去除首尾两边空格 --&gt;</span><br><span class="line">&lt;!-- .lazy修饰符 - 失去焦点内容改变时(onchange事件), 把内容同步给v-model的变量(不会一边写一边同步数据)。 --&gt;</span><br></pre></td></tr></table></figure>



<h2 id="vue指令-v-text和v-html"><a href="#vue指令-v-text和v-html" class="headerlink" title="vue指令 v-text和v-html"></a>vue指令 v-text和v-html</h2><blockquote>
<p>目的: 更新DOM对象的innerText/innerHTML</p>
</blockquote>
<ul>
<li><p>语法:</p>
<blockquote>
<ul>
<li><p>v-text=”vue数据变量”    </p>
</li>
<li><p>v-html=”vue数据变量”</p>
<p><strong>v-html 会解析数据的标签 ，而v-text则不会</strong></p>
</li>
</ul>
</blockquote>
</li>
<li><p><strong>注意: 会覆盖插值表达式</strong></p>
<p><code> </code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-text</span>=<span class="string">&quot;str&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">&quot;str&quot;</span>&gt;</span>&#123;&#123; 10 + 20 &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 注意: v-text或v-html会覆盖插值表达式 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">str</span>: <span class="string">&quot;&lt;span&gt;我是一个span&lt;/span&gt;&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript">&#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="vue指令-v-show和v-if"><a href="#vue指令-v-show和v-if" class="headerlink" title="vue指令 v-show和v-if"></a>vue指令 v-show和v-if</h2><blockquote>
<p>目标: 控制标签的隐藏或出现</p>
</blockquote>
<ul>
<li><p>语法</p>
<ul>
<li>v-show=”vue变量”            </li>
<li>v-if=”vue变量” </li>
<li>v-else</li>
</ul>
</li>
<li><p>原理</p>
<ul>
<li><p>v-show 用的display:none隐藏   (频繁切换使用)</p>
</li>
<li><p>v-if  直接从DOM树上移除</p>
<p><strong>v-if 进阶语法 v-else-if  哪个成立显示哪个</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- v-show 或者 v-if</span></span><br><span class="line"><span class="comment">       v-show=&quot;vue变量&quot;</span></span><br><span class="line"><span class="comment">       v-if=&quot;vue变量&quot;</span></span><br><span class="line"><span class="comment">     --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-show</span>=<span class="string">&quot;isShow&quot;</span>&gt;</span>我是h1<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-if</span>=<span class="string">&quot;isOk&quot;</span>&gt;</span>我是h2<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">      v-show隐藏: 采用display:none   // 频繁切换</span></span><br><span class="line"><span class="comment">      v-if隐藏:   采用从DOM树直接移除 // 移除</span></span><br><span class="line"><span class="comment">     --&gt;</span></span><br><span class="line"></span><br><span class="line">     <span class="comment">&lt;!-- v-if和v-else使用 --&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">&quot;age &gt;= 18&quot;</span>&gt;</span>成年了<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-else</span>&gt;</span>未成年<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">isShow</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">isOk</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">age</span>: <span class="number">2</span></span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript">&#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h2 id="vue指令-v-f"><a href="#vue指令-v-f" class="headerlink" title="vue指令-v-f"></a>vue指令-v-f</h2><blockquote>
<p>目标: 列表渲染, 所在标签结构, 按照数据数量, 循环生成</p>
</blockquote>
<ul>
<li><p>语法</p>
<ul>
<li>v-for=”(值, 索引) in 目标结构”</li>
<li>v-for=”值 in 目标结构”</li>
</ul>
</li>
<li><p>目标结构:</p>
<ul>
<li>可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)</li>
</ul>
</li>
<li><p>注意:</p>
<p>v-for的临时变量名不能用到v-for范围外</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 语法1:</span></span><br><span class="line"><span class="comment">      v-for=&quot;(值变量名, 索引变量名) in 目标结构&quot;</span></span><br><span class="line"><span class="comment">      口诀: 想要谁循环就放到谁身上</span></span><br><span class="line"><span class="comment">     --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(item, index) in arr&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span><br><span class="line">        &#123;&#123; item &#125;&#125; ---- &#123;&#123; index &#125;&#125;</span><br><span class="line">      <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- 语法2:</span></span><br><span class="line"><span class="comment">      v-for=&quot;值变量名 in 目标结构&quot;</span></span><br><span class="line"><span class="comment">      --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;obj in stuArr&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;obj.id&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123; obj.name &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123; obj.sex &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123; obj.hobby &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 语法3:(了解)</span></span><br><span class="line"><span class="comment">      v-for=&quot;(value, key) in 对象&quot;</span></span><br><span class="line"><span class="comment">       --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">&quot;(value, key) in tObj&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;value&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123; value &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        =======</span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123; key &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 语法4: (了解)</span></span><br><span class="line"><span class="comment">      v-for=&quot;变量名 in 固定数字&quot;</span></span><br><span class="line"><span class="comment">      从1开始遍历</span></span><br><span class="line"><span class="comment">     --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">&quot;n in count&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;n&quot;</span>&gt;</span>&#123;&#123; n &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">arr</span>: [<span class="string">&quot;小明&quot;</span>, <span class="string">&quot;小欢欢&quot;</span>, <span class="string">&quot;大黄&quot;</span>],</span></span><br><span class="line"><span class="javascript">      <span class="attr">stuArr</span>: [</span></span><br><span class="line"><span class="javascript">        &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">id</span>: <span class="number">1001</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">name</span>: <span class="string">&quot;孙悟空&quot;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">sex</span>: <span class="string">&quot;男&quot;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">hobby</span>: <span class="string">&quot;吃桃子&quot;</span>,</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">id</span>: <span class="number">1002</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">name</span>: <span class="string">&quot;猪八戒&quot;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">sex</span>: <span class="string">&quot;男&quot;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">hobby</span>: <span class="string">&quot;背媳妇&quot;</span>,</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">      ],</span></span><br><span class="line"><span class="javascript">      <span class="attr">tObj</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">name</span>: <span class="string">&quot;小黑&quot;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">age</span>: <span class="number">18</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">class</span>: <span class="string">&quot;1期&quot;</span>,</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">count</span>: <span class="number">10</span>,</span></span><br><span class="line"><span class="javascript">    &#125;;</span></span><br><span class="line"><span class="javascript">  &#125;,</span></span><br><span class="line"><span class="javascript">&#125;;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="vue指令-v-on按键修饰符"><a href="#vue指令-v-on按键修饰符" class="headerlink" title="vue指令-v-on按键修饰符"></a>vue指令-v-on按键修饰符</h2><p>语法:</p>
<ul>
<li>@keyup.enter  -  监测回车按键</li>
<li>@keyup.esc     -   监测返回按键</li>
<li>@keyup.prevent  - 阻止时间默认行为</li>
<li><a href="(https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6">更多</a></li>
</ul>
<h2 id="组件通信"><a href="#组件通信" class="headerlink" title="组件通信"></a>组件通信</h2><h3 id="一、父传子"><a href="#一、父传子" class="headerlink" title="一、父传子"></a>一、父传子</h3><p>子组件内, <strong>props</strong>定义变量, 在子组件使用变量</p>
<p>父组件内, 使用子组件, 属性方式给<strong>props</strong>变量传值</p>
<p><strong>父：</strong></p>
<p><img src="/2021/12/08/vue%E6%8C%87%E4%BB%A4/Users\s\AppData\Roaming\Typora\typora-user-images\image-20211023142311753.png" alt="image-20211023142311753"></p>
<p> <strong>子：</strong></p>
<p><img src="/2021/12/08/vue%E6%8C%87%E4%BB%A4/Users\s\AppData\Roaming\Typora\typora-user-images\image-20211023142412315.png" alt="image-20211023142412315"></p>
<h3 id="二-、父向子-配合循环"><a href="#二-、父向子-配合循环" class="headerlink" title="二 、父向子-配合循环"></a>二 、父向子-配合循环</h3><p><strong>数据</strong>：//  (父)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">list: [</span><br><span class="line">       &#123;</span><br><span class="line">         <span class="attr">id</span>: <span class="number">1</span>,</span><br><span class="line">         <span class="attr">proname</span>: <span class="string">&quot;超级好吃的棒棒糖&quot;</span>,</span><br><span class="line">         <span class="attr">proprice</span>: <span class="number">18.8</span>,</span><br><span class="line">         <span class="attr">info</span>: <span class="string">&quot;开业大酬宾, 全场8折&quot;</span>,</span><br><span class="line">       &#125;,</span><br><span class="line">    - - - - </span><br><span class="line">    ....（省略代码）</span><br></pre></td></tr></table></figure>

<p><strong>父:(传值)</strong>    // 通过v-for 循环每一条数据</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;myporduct</span><br><span class="line">    v-<span class="keyword">for</span>=<span class="string">&quot;it in list&quot;</span></span><br><span class="line">    :key=<span class="string">&quot;it.id&quot;</span></span><br><span class="line">    :title=<span class="string">&quot;it.proname&quot;</span></span><br><span class="line">    :price=<span class="string">&quot;it.proprice&quot;</span></span><br><span class="line">    :intro=<span class="string">&quot;it.info&quot;</span></span><br><span class="line">  &gt;&lt;/myporduct&gt;</span><br></pre></td></tr></table></figure>

<p><strong>子：(接收)</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="comment">//PS：props与data，computed都是变量，所以可以在上方通过插值表达式显示</span></span><br><span class="line">  <span class="attr">props</span>: [<span class="string">&quot;title&quot;</span>, <span class="string">&quot;price&quot;</span>, <span class="string">&quot;intro&quot;</span>],</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="三-、子向父"><a href="#三-、子向父" class="headerlink" title="三 、子向父"></a>三 、子向父</h3><p><strong>子向父传递数据语法: （原理：子触发父组件的自定义事件）</strong></p>
<p>父: @自定义事件名=”父methods函数”</p>
<p>子: this.$emit(“自定义事件名”, 传值) - 执行父methods里函数代码</p>
<p><img src="/2021/12/08/vue%E6%8C%87%E4%BB%A4/Users\s\AppData\Roaming\Typora\typora-user-images\image-20211023154809645.png" alt="image-20211023154809645"></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">子组件</span><br><span class="line">&lt;button .... @click=<span class="string">&quot;pubFn&quot;</span>.... &gt;</span><br><span class="line">    .......</span><br><span class="line"> &lt;/button&gt; </span><br><span class="line">methods:&#123;</span><br><span class="line">    <span class="function"><span class="title">pubFn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.$emit(<span class="string">&#x27;subprice&#x27;</span>, <span class="built_in">this</span>.index, <span class="number">1</span>) <span class="comment">// 子向父</span></span><br><span class="line">&#125;</span><br><span class="line">&#125;,</span><br><span class="line">  <span class="comment">////////////////////////</span></span><br><span class="line">父组件：</span><br><span class="line">&lt;/myporduct .... @subprice=<span class="string">&quot;fn&quot;</span>  .....&gt;</span><br><span class="line">.......</span><br><span class="line">........</span><br><span class="line">&lt;/myporduct&gt;</span><br><span class="line"><span class="comment">///////////////////////</span></span><br><span class="line">methods:&#123;</span><br><span class="line">    .........</span><br><span class="line">     <span class="function"><span class="title">fn</span>(<span class="params">inde, price</span>)</span>&#123;</span><br><span class="line">      <span class="comment">// 逻辑代码</span></span><br><span class="line">      <span class="built_in">this</span>.list[inde].proprice &gt; <span class="number">1</span> &amp;&amp; (<span class="built_in">this</span>.list[inde].proprice = (<span class="built_in">this</span>.list[inde].proprice - price).toFixed(<span class="number">2</span>))</span><br><span class="line">      <span class="comment">//可以换成如下代码</span></span><br><span class="line">      <span class="keyword">var</span> myPrice = <span class="built_in">this</span>.list[inde].proprice </span><br><span class="line">      <span class="keyword">if</span>(myPrice &gt; <span class="number">1</span>)&#123;</span><br><span class="line">          <span class="built_in">this</span>.list[inde].proprice = (myPrice -price).toFixed(<span class="number">2</span>)</span><br><span class="line">      &#125;</span><br><span class="line">        ........</span><br><span class="line">&#125;</span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line">    </span><br></pre></td></tr></table></figure>

<h2 id="钩子函数："><a href="#钩子函数：" class="headerlink" title="钩子函数："></a>钩子函数：</h2><table>
<thead>
<tr>
<th><strong>阶段</strong></th>
<th><strong>方法名</strong></th>
<th><strong>方法名</strong></th>
</tr>
</thead>
<tbody><tr>
<td>初始化</td>
<td>beforeCreate</td>
<td>created</td>
</tr>
<tr>
<td>挂载</td>
<td>beforeMount</td>
<td>mounted</td>
</tr>
<tr>
<td>更新</td>
<td>beforeUpdate</td>
<td>updated</td>
</tr>
<tr>
<td>销毁</td>
<td>beforeDestroy</td>
<td>destroyed</td>
</tr>
</tbody></table>
<h2 id="组件缓存"><a href="#组件缓存" class="headerlink" title="组件缓存"></a>组件缓存</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;keep-alive&gt; <span class="comment">// keep-alive：保持-活着</span></span><br><span class="line">    <span class="xml"><span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">&quot;xxx&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span></span><br><span class="line">&lt;/keep-alive&gt;</span><br></pre></td></tr></table></figure>

<h3 id="扩展"><a href="#扩展" class="headerlink" title="扩展:"></a>扩展:</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 组件缓存下 多的两个函数</span></span><br><span class="line"><span class="function"><span class="title">activated</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;02-username 激活了&quot;</span>);</span><br><span class="line">&#125;,</span><br><span class="line"><span class="function"><span class="title">deactivated</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;02-username 失去激活&quot;</span>);</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<h2 id="组件的插槽技术"><a href="#组件的插槽技术" class="headerlink" title="组件的插槽技术"></a>组件的插槽技术</h2><ol>
<li><p>组件内用<code>&lt;slot&gt;&lt;/slot&gt;</code>占位 （在不确定使用什么标签的位置，使用slot占位）</p>
</li>
<li><p>使用组件时<code>&lt;Pannel&gt;&lt;/Pannel&gt;</code>夹着的地方, 传入标签替换slot</p>
<p>组件内：</p>
<p><img src="/2021/12/08/vue%E6%8C%87%E4%BB%A4/Users\s\AppData\Roaming\Typora\typora-user-images\image-20211026185300059.png" alt="image-20211026185300059">![image-</p>
<p><img src="/2021/12/08/vue%E6%8C%87%E4%BB%A4/Users\s\AppData\Roaming\Typora\typora-user-images\image-20211026185425383.png" alt="image-20211026185425383"></p>
</li>
</ol>
<p><strong>slot标签内的内容  就是默认要显示的内容，</strong></p>
<h1 id="脚手架-vue-cli-安装："><a href="#脚手架-vue-cli-安装：" class="headerlink" title="脚手架(@vue/cli)安装："></a>脚手架(@vue/cli)安装：</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">yarn global add @vue/cli      ----#global 全局的</span><br><span class="line"># OR</span><br><span class="line">npm install -g @vue/cli</span><br></pre></td></tr></table></figure>

<h2 id="检查版本："><a href="#检查版本：" class="headerlink" title="检查版本："></a>检查版本：</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue -V  (注意V是大写)</span><br></pre></td></tr></table></figure>

<h2 id="使用脚手架创建项目："><a href="#使用脚手架创建项目：" class="headerlink" title="使用脚手架创建项目："></a>使用脚手架创建项目：</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># vue和create是命令, vuecli-demo是文件夹名</span><br><span class="line">vue create vuecli-demo</span><br><span class="line"># create：创建</span><br></pre></td></tr></table></figure>

<h2 id="进入脚手架项目下-启动内置的热更新本地服务器"><a href="#进入脚手架项目下-启动内置的热更新本地服务器" class="headerlink" title="进入脚手架项目下, 启动内置的热更新本地服务器"></a>进入脚手架项目下, 启动内置的热更新本地服务器</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">cd vuecil-demo</span><br><span class="line"></span><br><span class="line">npm run serve</span><br><span class="line"># 或</span><br><span class="line">yarn serve</span><br></pre></td></tr></table></figure>

<h3 id="vue-cli-目录和代码分析"><a href="#vue-cli-目录和代码分析" class="headerlink" title="@vue/cli 目录和代码分析"></a>@vue/cli 目录和代码分析</h3><blockquote>
<p>目标: 讲解重点文件夹, 文件的作用, 以及文件里代码的意思</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">vuecil-demo        <span class="comment"># 项目目录</span></span><br><span class="line">   ├── node_modules <span class="comment"># 项目依赖的第三方包</span></span><br><span class="line">   ├── public       <span class="comment"># 静态文件目录</span></span><br><span class="line">     ├── favicon.ico<span class="comment"># 浏览器小图标</span></span><br><span class="line">     └── index.html <span class="comment"># 单页面的html文件(网页浏览的是它)</span></span><br><span class="line">   ├── src          <span class="comment"># 业务文件夹</span></span><br><span class="line">     ├── assets     <span class="comment"># 静态资源</span></span><br><span class="line">       └── logo.png <span class="comment"># vue的logo图片</span></span><br><span class="line">     ├── components <span class="comment"># 组件目录</span></span><br><span class="line">       └── HelloWorld.vue <span class="comment"># 欢迎页面vue代码文件 </span></span><br><span class="line">     ├── App.vue    <span class="comment"># 整个应用的根组件</span></span><br><span class="line">     └── main.js    <span class="comment"># 入口js文件</span></span><br><span class="line">   ├── .gitignore   <span class="comment"># git提交忽略配置</span></span><br><span class="line">   ├── babel.config.js  <span class="comment"># babel配置</span></span><br><span class="line">   ├── package.json  <span class="comment"># 依赖包列表</span></span><br><span class="line">   ├── README.md    <span class="comment"># 项目说明</span></span><br><span class="line">└── yarn.lock    <span class="comment"># 项目包版本锁定和缓存地址</span></span><br></pre></td></tr></table></figure>

<p>主要文件及含义</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">node_modules下都是下载的第三方包</span><br><span class="line">public/index.html – 浏览器运行的网页</span><br><span class="line">src/main.js – webpack打包的入口文件</span><br><span class="line">src/App.vue – vue项目入口页面</span><br><span class="line">package.json – 依赖包列表文件</span><br></pre></td></tr></table></figure>


    </div>

<div>

<div>

    <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>

</div>


</div>

    
    
    
        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://weibo.com/u/6480746839">
            <span class="icon">
              <i class="fab fa-weibo"></i>
            </span>

            <span class="label">微博</span>
          </a>
        </div>

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://www.zhihu.com/people/ai-xiao-92-34">
            <span class="icon">
              <i class="fab fa-zhihu"></i>
            </span>

            <span class="label">知乎</span>
          </a>
        </div>

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://mp.weixin.qq.com/s/gQBZKv4EyHc_X-CSebCjIw">
            <span class="icon">
              <i class="fab fa-weixin"></i>
            </span>

            <span class="label">微信</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2021/12/08/vue-element-edmin/" rel="prev" title="vue-element-edmin (中台人力资源管理系统)">
      <i class="fa fa-chevron-left"></i> vue-element-edmin (中台人力资源管理系统)
    </a></div>
      <div class="post-nav-item">
    <a href="/2021/12/08/hello-world/" rel="next" title="Hello World">
      Hello World <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E6%8C%87%E4%BB%A4-v-bind"><span class="nav-number">1.</span> <span class="nav-text">vue指令-v-bind</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E6%8C%87%E4%BB%A4-v-on%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="nav-number">2.</span> <span class="nav-text">vue指令-v-on事件对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%9A"><span class="nav-number">3.</span> <span class="nav-text">事件修饰符：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E6%8C%87%E4%BB%A4-v-model"><span class="nav-number">4.</span> <span class="nav-text">vue指令 v-model</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E6%8C%87%E4%BB%A4-v-model%E7%BB%91%E5%AE%9A%E4%B8%8D%E5%90%8C%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE"><span class="nav-number">5.</span> <span class="nav-text">vue指令 v-model绑定不同表单标签</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-model%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="nav-number">6.</span> <span class="nav-text">v-model修饰符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E6%8C%87%E4%BB%A4-v-text%E5%92%8Cv-html"><span class="nav-number">7.</span> <span class="nav-text">vue指令 v-text和v-html</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E6%8C%87%E4%BB%A4-v-show%E5%92%8Cv-if"><span class="nav-number">8.</span> <span class="nav-text">vue指令 v-show和v-if</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E6%8C%87%E4%BB%A4-v-f"><span class="nav-number">9.</span> <span class="nav-text">vue指令-v-f</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E6%8C%87%E4%BB%A4-v-on%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="nav-number">10.</span> <span class="nav-text">vue指令-v-on按键修饰符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1"><span class="nav-number">11.</span> <span class="nav-text">组件通信</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E7%88%B6%E4%BC%A0%E5%AD%90"><span class="nav-number">11.1.</span> <span class="nav-text">一、父传子</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%8C-%E3%80%81%E7%88%B6%E5%90%91%E5%AD%90-%E9%85%8D%E5%90%88%E5%BE%AA%E7%8E%AF"><span class="nav-number">11.2.</span> <span class="nav-text">二 、父向子-配合循环</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%89-%E3%80%81%E5%AD%90%E5%90%91%E7%88%B6"><span class="nav-number">11.3.</span> <span class="nav-text">三 、子向父</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%EF%BC%9A"><span class="nav-number">12.</span> <span class="nav-text">钩子函数：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E7%BC%93%E5%AD%98"><span class="nav-number">13.</span> <span class="nav-text">组件缓存</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%89%A9%E5%B1%95"><span class="nav-number">13.1.</span> <span class="nav-text">扩展:</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E7%9A%84%E6%8F%92%E6%A7%BD%E6%8A%80%E6%9C%AF"><span class="nav-number">14.</span> <span class="nav-text">组件的插槽技术</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%84%9A%E6%89%8B%E6%9E%B6-vue-cli-%E5%AE%89%E8%A3%85%EF%BC%9A"><span class="nav-number"></span> <span class="nav-text">脚手架(@vue&#x2F;cli)安装：</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A3%80%E6%9F%A5%E7%89%88%E6%9C%AC%EF%BC%9A"><span class="nav-number">1.</span> <span class="nav-text">检查版本：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E8%84%9A%E6%89%8B%E6%9E%B6%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE%EF%BC%9A"><span class="nav-number">2.</span> <span class="nav-text">使用脚手架创建项目：</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%BF%9B%E5%85%A5%E8%84%9A%E6%89%8B%E6%9E%B6%E9%A1%B9%E7%9B%AE%E4%B8%8B-%E5%90%AF%E5%8A%A8%E5%86%85%E7%BD%AE%E7%9A%84%E7%83%AD%E6%9B%B4%E6%96%B0%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="nav-number">3.</span> <span class="nav-text">进入脚手架项目下, 启动内置的热更新本地服务器</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#vue-cli-%E7%9B%AE%E5%BD%95%E5%92%8C%E4%BB%A3%E7%A0%81%E5%88%86%E6%9E%90"><span class="nav-number">3.1.</span> <span class="nav-text">@vue&#x2F;cli 目录和代码分析</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="爱笑"
      src="/images/title.jpg">
  <p class="site-author-name" itemprop="name">爱笑</p>
  <div class="site-description" itemprop="description">热衷于前端，热衷于王者，王者峡谷乱杀 -_-</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">14</span>
          <span class="site-state-item-name">文章</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">5</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">3</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="sidebar-button motion-element"><i class="fa fa-comment"></i>
    评论
  </a>
  </div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/aixiao0322" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;aixiao0322" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://gitee.com/aixiao0322" title="gitee → https:&#x2F;&#x2F;gitee.com&#x2F;aixiao0322" rel="noopener" target="_blank"><i class="fab fa-gratipay fa-fw"></i>gitee</a>
      </span>
      <span class="links-of-author-item">
        <a href="/aini17630247921@163.com" title="E-Mail → aini17630247921@163.com"><i class="fab fa-youtube fa-fw"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://juejin.cn/user/255500362975704" title="掘金 → https:&#x2F;&#x2F;juejin.cn&#x2F;user&#x2F;255500362975704" rel="noopener" target="_blank"><i class="fab fa-artstation fa-fw"></i>掘金</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">爱笑</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>




  
















  

  


<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el         : '#valine-comments',
      verify     : false,
      notify     : true,
      appId      : 'l6M4SnuhiCKBnxpPdX1WbBB9-gzGzoHsz',
      appKey     : 'u1jJ2Fs9DGFdfpIgDQll55ju',
      placeholder: "请举手发言.... 请你填写自己的昵称，邮箱以及博客链接，为了更方便的找到您",
      avatar     : 'mm',
      meta       : guest,
      pageSize   : '10' || 10,
      visitor    : true,
      lang       : 'zh-cn' || 'zh-cn',
      path       : location.pathname,
      recordIP   : true,
      serverURLs : ''
    });
  }, window.Valine);
});
</script>

</body>
</html>
